<template>
  <a-card>
    <a-form :model="form" auto-label-width @submit-success="submit">
      <a-form-item field="oldPassword" :label="t['旧密码']" :rules="rules">
        <div class="w-[200px]">
          <a-input-password v-model="form.oldPassword" />
        </div>
      </a-form-item>

      <a-form-item field="newPassword" :label="t['新密码']" :rules="rules">
        <div class="w-[200px]">
          <a-input-password v-model="form.newPassword" />
        </div>
      </a-form-item>
      <div>
        <a-button type="primary" html-type="submit">
          {{ t["保存"] }}
        </a-button>
      </div>
    </a-form>
  </a-card>
</template>

<script setup lang="ts">
import { updateUserPwd } from "@/api/service/user";

const t = translate("公共模块");
const rules = [{ message: "6-16", minLength: 6, maxLength: 16, required: true }];
const form = ref({
  oldPassword: "",
  newPassword: ""
});

const submit = async () => {
  await updateUserPwd(form.value.oldPassword, form.value.newPassword);
};
</script>

<style lang="scss" scoped>
.password-setting {
  background-color: #f8f8f8;
}
</style>
